<template>
	<view>
		<cu-custom bgColor="bg-white-nav" isBack>
		    <block slot="content">订单详情</block>
		</cu-custom>
		<view class="container">
			<view class="m-t40">
				<u-steps current="0">
					<u-steps-item title="接单" desc="10:30"></u-steps-item>
					<u-steps-item title="去完成" desc="10:35"></u-steps-item>
					<u-steps-item title="等待检测" desc="11:40"></u-steps-item>
				</u-steps>
			</view>
			<view class="box-cell m-t49">
				<view class="title">客资获取提高40%！</view>
				<view class="type">任务类型：<text class="value">{{'小红书私信'}}</text></view>
				<view class="type">任务要求：<text class="value">{{'关注、私信、笔记评论、头像点赞'}}</text></view>
				<view class="type">订单ID：<text class="value">{{'1524978457852246'}}</text></view>
				<view class="line"></view>
				<view class="commission u-flex u-flex-end">
					<view>订单佣金：<text class="sym">￥<text class="price">38.5</text></text></view>
				</view>
			</view>
			<view class="box-cell m-t20">
				<view class="u-flex u-flex-between l-border-bottom p-b30">
					<view class="send-title">发送UID：<text class="label">{{uid}}</text></view>
					<view class="copy color-text" @click="copy(uid)">
						<i class="cuIcon cuIcon-copy"></i>
						<text>复制</text>
					</view>
				</view>
				<view class="u-flex u-flex-between m-t30 m-b20">
					<view class="send-title">发送内容</view>
					<view class="copy color-text" @click="copy(value)">
						<i class="cuIcon cuIcon-copy"></i>
						<text>复制</text>
					</view>
				</view>
				<view class="content">{{value}}</view>
			</view>
		</view>
		<view class="cu-bar tabbar foot p-l30 p-r30">
			<button class="common-btn">接单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid:'456312312',
				value: '宝宝您看的这款是咱们家的主打风格哈，您可以给小编发下你喜欢的类型，我们的客 服同学会给您看一些相似的拍摄风格，我们也能尽快为你匹配到最适合你的样式哈。小红薯下午好～ 你喜欢的这款法式风格咱家五月份有活动哈！ 拍婚纱照 送写真和专属 mv~优惠力度比较大呢！ 可以跟小编了聊聊你的需求哇～ 宝宝您看的这款是咱们家的主打风格哈， 您可以给小编发下你喜欢的类型， 我们的客服同学会给您看一些相似的拍摄风格， 我们也能尽快为你匹配到最适合你的样式哈。'
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.l-border-bottom {
		border-bottom: 2rpx solid #F0F1F5;
	}
	.container {
		padding: 0 30rpx;
		padding-bottom: 130rpx;
		overflow: hidden;
		.title {
			font-size: 34rpx;
			color: #111;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		
		.type {
			margin-bottom: 12rpx;
			font-size: 26rpx;
			color: #666;
		}
		
		.line {
			width: 100%;
			height: 2rpx;
			background: #F0F1F5;
			margin-top: 18rpx;
		}
		.send-title {
			font-size: 30rpx;
			color: #111;
			font-weight: 600;
		}
		.commission {
			font-size: 26rpx;
			color: #666;
			margin-top: 20rpx;
			.sym {
				font-size: 22rpx;
				color: #FA5151;
			}
			.price {
				font-size: 30rpx;
				font-weight: 600;
			}
		}
		.copy {
			border: 1rpx solid #3662EC;
			border-radius: 4rpx;
			font-size: 22rpx;
			padding: 4rpx;
			color: #3662EC;
			display: flex;
			align-items: center;
		}
		.content {
			color: #666;
			line-height: 40rpx;
			font-size: 30rpx;
		}
		.btn-box {
			padding: 16rpx 30rpx;
			background-color: #fff;
		}
	}
	.box-cell {
		border-radius: 16rpx;
		background: #fff;
		padding: 30rpx;
		.label {
			color: #666;
		}
	}
	
	::v-deep .u-steps-item__wrapper {
		background: #F0F1F5 !important;
	}
</style>